<template>
    <div class="wrapper" >
		<!-- <div>111{{SearchKey}}</div> -->
		<router-view :key="$route.name + ($route.params.id || '')" style="background-color: #fff5e9"></router-view>
		<el-form >
			<el-form-item label="价格筛选: " class="price-border">
				<el-input v-model="formData.minPrice" placeholder="最低价格" style="width: 80px; margin-right: 20px;"></el-input>
				<el-input v-model="formData.maxPrice" placeholder="最高价格" style="width: 80px; margin-left: 20px;"></el-input>
				<el-button type="warning" plain style="margin-left: 20px;" @click="getWay()">确认</el-button>
			</el-form-item>
			<el-form-item label="筛选排序: " >
				<div class="custom-style">
				    <el-segmented  v-model="value" :options="options" size="default" style="width: 300px;" @change="getWay()"/>
				  </div>
			</el-form-item>
		</el-form>
		
		<div class="goods" style="display: flex; flex-direction: row;" >
      <el-card style="max-width: 240px; margin-right: 15px;" @click="goGoodsInfo(item)" v-for="item in tableData.ff">
        <div class="image-container">
          <img
              :src="getpath(item.imagePathList[0])"
              class="fixed-size-image"
          />
        </div>
        <template #footer>
          <div class="goods-name">{{item.name}}</div>
          <br/>
<!--          <div style="text-align: right; align-items: baseline;">-->
<!--            <span class="price-icon">原价:</span>-->

<!--            <br/>-->
          <span style=" font-size: 17px; color: #666;">会员价:
            <span style="color: #ff6200; font-weight: 600;">{{Number(item.price) - 2}}</span><span class="price">￥{{item.price}}</span>
          </span>
<!--    </div>-->

        </template>
			</el-card>
		</div>
		<div class="goods" style="display: flex; flex-direction: row;margin-top: 20px;" v-if="tableData.bf.length>0">
			<el-card style="max-width: 240px; margin-right: 15px;" @click="goGoodsInfo(item)" v-for="item in tableData.bf">
        <div class="image-container">
          <img
              :src="getpath(item.imagePathList[0])"
              class="fixed-size-image"
          />
        </div>
        <template #footer>
          <div class="goods-name">{{item.name}}</div>
          <br/>
          <!--          <div style="text-align: right; align-items: baseline;">-->
          <!--            <span class="price-icon">原价:</span>-->

          <!--            <br/>-->
          <span style=" font-size: 17px; color: #666;">会员价:
            <span style="color: #ff6200; font-weight: 600;">{{Number(item.price) - 2}}</span><span class="price">￥{{item.price}}</span>
          </span>
          <!--    </div>-->

        </template>
			</el-card>
		</div>
		<el-pagination 
			background 
			v-model:current-page="params.pageNo"
			:total="tableData.total"
			:page-count="tableData.pages"
			@current-change="getTableData(route.query.categoryId)"
			style="margin-top:100px;margin-left: 720px;"
		></el-pagination>
    </div>
</template>

<script setup >
import { onMounted, ref,reactive,watch,nextTick} from 'vue'
import { get } from '@/plugins/axios'
import { useRoute,useRouter } from 'vue-router';
import { getPath } from '@/util';
import { onBeforeRouteUpdate } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const Search = ref('')
const route = useRoute()
const SearchKey = ref('')
const router = useRouter()

const value = ref('销量↓')

const options = ['销量↓', '价格↑', '价格↓']
const tableData = reactive({
	ff:[],
	bf:[],
	pages: 0,
	total: 0
})

const goGoodsInfo= (item)=>{
	router.push({
			path:'/goodsInfo',
			query:{goodsId:item.id}
		})
}
const params = reactive({
	categoryId: -1,
	pageNo: 1,
	pageSize: 10
})
onBeforeRouteUpdate((to, from, next) => {
  getTableData(to.query.categoryId);
  next();
});

const formData = reactive({
	maxPrice: '',
	minPrice: '',
	priceOrder: null,
	salesOrder: null
})

getTableData(-1)

function getTableData(params0) {
	
params.categoryId=params0
	// get("/goods/list", params,content =>{
	// 	tableData.ff=[]
	// 	tableData.bf=[]
	// 	tableData.pages = content.pages
	// 	tableData.total = content.total
	// 	for(const key in content.records )
	// 	{
	// 		if(key<5)
	// 		{
	// 			tableData.ff.push(content.records[key])
	// 		}
	// 		else{
	// 			tableData.bf.push(content.records[key])
	// 		}
	// 	}
	// 	console.dir(tableData.ff)
	// 	console.dir(tableData.bf)
	// 	console.dir(params.categoryId)
			
		
	// })
getWay()



}
function getpath(string){
	return getPath(string)
}
function getWay(){
	// console.dir(value.value)
	const order=ref()
	if(value.value==="销量↓"){order.value=0}
	if(value.value==="价格↑"){order.value=1}
	if(value.value==="价格↓"){order.value=2}
    // console.dir(order)
    let flag = true
    // console.log('formData.maxPrice', formData.maxPrice)
    // console.log('formData.minPrice', formData.minPrice)
    if (formData.maxPrice != '' && formData.minPrice != '') {
        flag = Number(formData.maxPrice) > Number(formData.minPrice) ? true : false
        // console.log('flag', flag)
    }
    
    if (flag) {
        get("/goods/getByOrderAndCategory",
            { categoryId: params.categoryId, order: order.value, maxPrice: formData.maxPrice, minPrice: formData.minPrice, pageNo: params.pageNo, pageSize: params.pageSize }, content => {
            tableData.ff=[]
            tableData.bf=[]
            tableData.pages = content.pages
            tableData.total = content.total
            for(const key in content.records )
            {
                if(key<5)
                {
                    tableData.ff.push(content.records[key])
                }
                else{
                    tableData.bf.push(content.records[key])
                }
            }
            // console.dir(tableData.ff)
            // console.dir(tableData.bf)
            // console.dir(params.categoryId)

            
            if(SearchKey.value!==route.query.SearchKey&&SearchKey.value!==null){
                params.pageNo=1
                params.pageSize=10
                // console.dir(SearchKey.value)
                // console.dir(route.query.SearchKey)
                SearchKey.value=route.query.SearchKey    
                searchByGoodsName()
                route.query.SearchKey=''
            }
                
        })
    } else {
        ElMessage({
            type: 'error',
            message: '抱歉，最低价格不可以大于等于最大价格'
        })
    }
    
}

function searchByGoodsName(){
	// console.dir(SearchKey.value)
	if(SearchKey.value!='')
	{
		get("/goods/searchByGoodsName", {searchValue:SearchKey.value,pageNo:params.pageNo,pageSize:params.pageSize},content =>{
			tableData.ff=[]
			tableData.bf=[]
			tableData.pages = content.pages
			tableData.total = content.total
			for(const key in content.records )
			{
				if(key<5)
				{
					tableData.ff.push(content.records[key])
				}
				else{
					tableData.bf.push(content.records[key])
				}
			}
			 //console.dir(tableData.ff)
			 //console.dir(tableData.bf)
			// console.dir(params.categoryId)
			
		})
	}
	
}

const fetchData = async (params) => {
      // 根据路由参数获取数据
    };

    // 使用onBeforeRouteUpdate守卫
    onBeforeRouteUpdate(async (to, from) => {
      // 当路由更新时，组件复用时调用
	  
	  //getTableData(params.categoryId)
      await fetchData(to.params);
    });

</script>

<style lang="scss" scoped>
$tableBorder: 1px solid #f8c27f;
.wrapper{
	width: 1260px;
	margin: 20px auto;
	min-height: 700px;
	.el-form{
		border: $tableBorder;
		margin-top: 16px;
        border-radius: 8px;
		.el-form-item{
			padding: 6px;
			margin-bottom: 0;
		}
		.price-border{
			border-bottom: $tableBorder;
		}
	}
	.goods{
		margin-top: 30px;
		.el-card:hover{
			cursor: pointer;
		}
	}
	
}
.price-icon{
	color: #ff9900;
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
  padding-left:15px;
}
.price{
	color: #ff9900;
	font-size: 14px;
	font-weight: 700;
	line-height: 36px;
  padding-left:10px;
  //text-decoration: line-through;
}

.custom-style .el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #f8c27f;
  --el-border-radius-base: 16px;
}

/* 添加图片容器样式 */
.image-container {
  width: 200px;
  height: 200px; /* 固定高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 固定图片大小 */
.fixed-size-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}
/* 添加商品名称样式 */
.goods-name {
  margin-bottom: 8px;
  font-size: 1.2rem;
  padding-right: 8px;
}
</style>